<template>
  <div>
    <Header :title="'有限空间作业票申请'" :backStep="'-1'"></Header>
    <div class="formBox">
      <div class="formTitle">作业信息</div>
      <div class="formItem">
        <!-- <van-cell title="作业票编号:">
          <template #default>
            <div>2222</div>
          </template>
        </van-cell> -->
        <van-cell title="作业内容:">
          <template #default>
            <input
              type="text"
              v-model="formInfo.jobContent"
              class="inputCss"
              placeholder="请输入作业内容"
            />
          </template>
        </van-cell>
        <van-cell title="作业地点:">
          <template #default>
            <input
              type="text"
              v-model="formInfo.jobAddress"
              class="inputCss"
              placeholder="请输入作业地点"
            />
          </template>
        </van-cell>
      </div>

      <div class="formItem">
        <van-cell title="开始时间:" is-link @click="showPicker = true">
          <template #default>
            <div>{{ formattedDate }}</div>
          </template>
        </van-cell>
        <van-cell title="结束时间:" is-link @click="showPicker2 = true">
          <template #default>
            <div>{{ formattedDate2 }}</div>
          </template>
        </van-cell>
      </div>
      <div class="formItem">
        <van-cell title="作业单位:">
          <template #default>
            <input
              type="text"
              v-model="formInfo.jobCompany"
              class="inputCss"
              placeholder="请输入作业单位"
            />
          </template>
        </van-cell>
        <van-cell title="作业负责人:" is-link @click="showPicker3 = true">
          <template #default>
            <div>{{ respondent }}</div>
          </template>
        </van-cell>
        <van-cell title="作业监护人:">
          <template #default>
            <input
              v-model="formInfo.jobGuar"
              type="text"
              class="inputCss"
              placeholder="请输入作业监护人"
            />
          </template>
        </van-cell>
        <van-cell title="措施制定人:">
          <template #default>
            <input
              v-model="formInfo.jobProducer"
              type="text"
              class="inputCss"
              placeholder="请输入措施制定人"
            />
          </template>
        </van-cell>
        <van-cell title="安全交底人:" is-link @click="showPicker4 = true">
          <template #default>
            {{ sateRespondent }}
          </template>
        </van-cell>
      </div>
      <div class="formItem">
        <van-cell title="有限空间名称:">
          <template #default>
            <input
              v-model="formInfo.jobSpaceName"
              type="text"
              class="inputCss"
              placeholder="请输入有限空间名称"
            />
          </template>
        </van-cell>
        <van-cell title="原有介质名称:">
          <template #default>
            <input
              v-model="formInfo.jobMedium"
              type="text"
              class="inputCss"
              placeholder="请输入原有介质名称"
            />
          </template>
        </van-cell>
        <!-- <div class="cellCss">
          <div class="cellCssTitle">关联作业票:</div>
          <div>
            <van-uploader v-model="uploader1" :max-count="3" />
          </div>
        </div> -->
        <div class="cellCss">
          <div class="cellCssTitle">关联图片:</div>
          <div>
            <van-uploader
              v-model="uploader1"
              :max-count="3"
              :after-read="afterRead"
            />
          </div>
        </div>
      </div>
      <div class="formTitle">审核信息</div>
      <van-cell title="审批人:" is-link @click="showPicker5 = true">
        <template #default>
          {{ approver }}
        </template>
      </van-cell>
    </div>

    <van-goods-action>
      <van-goods-action-button
        :style="{
          background: 'linear-gradient(270deg, #006BFF 0%, #458CFF 100%)',
        }"
        type="danger"
        text="提交申请"
        @click="onClickButton"
      />
    </van-goods-action>

    <div>
      <van-popup v-model="showPicker" position="bottom">
        <van-datetime-picker
          v-model="currentDate"
          type="datetime"
          title="选择完整时间"
          @confirm="onConfirm"
          @cancel="showPicker = false"
        />
      </van-popup>
      <van-popup v-model="showPicker2" position="bottom">
        <van-datetime-picker
          v-model="currentDate2"
          type="datetime"
          title="选择完整时间"
          @confirm="onConfirm2"
          @cancel="showPicker2 = false"
        />
      </van-popup>

      <van-popup v-model="showPicker3" position="bottom">
        <van-picker
          title="标题"
          show-toolbar
          :columns="columns"
          @confirm="onConfirm3"
        />
      </van-popup>

      <van-popup v-model="showPicker4" position="bottom">
        <van-picker
          title="标题"
          show-toolbar
          :columns="columns2"
          @confirm="onConfirm4"
        />
      </van-popup>
      <van-popup v-model="showPicker5" position="bottom">
        <van-picker
          title="标题"
          show-toolbar
          :columns="columns3"
          @confirm="onConfirm5"
        />
      </van-popup>
    </div>
  </div>
</template>

<script>
import { uploadApi, getUserInfoListApi, addJobTicketApi } from '@/api/index'
import Header from '@/components/Header.vue'
export default {
  name: 'addHomeWork',
  props: {},
  components: {
    Header,
  },
  data() {
    return {
      currentDate: new Date(),
      currentDate2: new Date(),
      showPicker: false,
      showPicker2: false,
      showPicker3: false,
      showPicker4: false,
      showPicker5: false,
      formattedDate: '请选择时间',
      formattedDate2: '请选择时间',
      columns: [],
      columns2: [],
      columns3: [],
      respondent: '请选择作业负责人',
      respondentValue: '',
      sateRespondent: '请选择安全交底人',
      sateRespondentValue: '',
      uploader1: [],
      uploader2: [],
      uploaderSubmit: [],
      approver: '请选择审批人',
      approverValue: '',
      formInfo: {
        jobContent: '',
        jobAddress: '',
        jobCompany: '',
        jobGuar: '',
        jobProducer: '',
        jobSpaceName: '',
        jobMedium: '',
      },
    }
  },
  created() {
    this.getUserInfoList()
  },
  methods: {
    onConfirm(e) {
      this.formattedDate = this.formatDate(e)
      this.showPicker = false
    },
    onConfirm2(e) {
      this.formattedDate2 = this.formatDate(e)
      this.showPicker2 = false
    },
    formatDate(date) {
      // 获取年、月、日、时、分、秒
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0') // 月份从0开始，需要加1
      const day = String(date.getDate()).padStart(2, '0')
      const hour = String(date.getHours()).padStart(2, '0')
      const minute = String(date.getMinutes()).padStart(2, '0')
      const second = String(date.getSeconds()).padStart(2, '0')
      // 拼接成目标格式
      return `${year}-${month}-${day} ${hour}:${minute}:${second}`
    },
    onConfirm3(value) {
      this.respondent = value.text
      this.respondentValue = value.value
      this.showPicker3 = false
    },
    onConfirm4(value) {
      this.sateRespondent = value.text
      this.sateRespondentValue = value.value
      this.showPicker4 = false
    },
    onConfirm5(value) {
      this.approver = value.text
      this.approverValue = value.value
      this.showPicker5 = false
    },
    async onClickButton() {
      const submitData = {
        jobContent: this.formInfo.jobContent,
        jobAddress: this.formInfo.jobAddress,
        jobStartTime: this.formattedDate,
        jobEndTime: this.formattedDate2,
        jobCompany: this.formInfo.jobCompany,
        jobPower: this.respondent,
        jobGuar: this.formInfo.jobGuar,
        jobProducer: this.formInfo.jobProducer,
        jobConfessor: this.sateRespondent,
        jobSpaceName: this.formInfo.jobSpaceName,
        jobMedium: this.formInfo.jobMedium,
        jobImage: this.uploaderSubmit.join('&'),
        jobApprover: this.approver,
        jobSubmitterId: JSON.parse(sessionStorage.getItem('loginInfo')).userId,
      }
      console.log(submitData)

      for (let k in submitData) {
        if (submitData[k] === '') {
          this.$toast.fail('请填写完整信息')
          return
        }
      }

      const res = await addJobTicketApi(submitData)

      if (res.code === 0) {
        this.$router.push('/successSubmit')
      }
    },
    async afterRead(file) {
      // 此时可以自行将文件上传至服务器
      // console.log(file)
      const formData = new FormData()
      formData.append('file', file.file)
      const res = await uploadApi(formData)
      // console.log(res)
      this.uploaderSubmit.push(res.data)
      console.log(this.uploaderSubmit)
    },
    async getUserInfoList() {
      const res = await getUserInfoListApi()
      // console.log(res)
      const mapList = res.data.map((item) => {
        return {
          text: item.name,
          value: item.id,
        }
      })
      this.columns = mapList
      this.columns2 = mapList
      this.columns3 = mapList
    },
  },
  mounted() {},
  watch: {},
  computed: {},
  filters: {},
}
</script>

<style scoped lang="scss">
.formBox {
  padding: 16px;
  background: #f7f7f7;
  padding-bottom: 60px;
  .formTitle {
    font-weight: bold;
    font-size: 16px;
    color: #2f3133;
    margin-bottom: 16px;
  }
  .formItem {
    border-radius: 10px; /* 设置圆角大小 */
    overflow: hidden; /* 隐藏超出部分 */
    background-color: #fff; /* 可选：设置背景颜色 */
    margin-bottom: 12px;
    .inputCss {
      border: none;
      outline: none;
      background: transparent;
      font-size: 14px;
      text-align: right; /* 添加这行代码 */
    }
    .cellCss {
      box-sizing: border-box;
      width: 100%;
      padding: 10px 16px;
      overflow: hidden;
      color: #323233;
      font-size: 14px;
      line-height: 24px;
      background-color: #fff;
      .cellCssTitle {
        margin-bottom: 10px;
      }
    }
  }
}

.van-cell {
  align-items: center;
  ::v-deep .van-field__label {
    color: #323233 !important ;
  }
}
.van-cell__value {
  overflow: visible;
}
</style>
